<template>
  <div class="fication">
    <ul class="left-side">
      <li v-for="(item,index) in sideList" :key="item._id" @click='clickHandler(index,item.classify_id)' :class="{current:num === index}">{{item.classify_name}}</li>
    </ul>
    <div class="content">
      <right-side :id="id"></right-side>
    </div>
  </div>
</template>

<script>
import RightSide from './RightSide.vue'

export default {
  components: {
    RightSide
  },
  async mounted() {
  
    const side = await this.$http.get({
      url: '/api/goods/classify'
    })
    this.sideList = side;
  },
  data() {
    return {
      isBanner: false,
      num:0,
      id:String,
      sideList:[]
    }
  },
  methods: {
    clickHandler(index,id) {
      this.num = index;
      this.id = id;
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../assets/stylus/border.styl";
  .fication
    height 100%
    display flex
    .content
      height 100%
      flex 275
    .left-side
      flex 100
      height 100%
      background-color #f0f1fd;
      width 1rem
      text-align center
      overflow scroll
      line-height .48rem
      font-size .14rem
      border_1px(0 1px 0 0)
      .current
        color #666ee8
        background-color #fff
        border-left 2px solid #666ee8

</style>